<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>overlay</title>
<link rel="stylesheet" type="text/css" media="screen"
	href="/i-webmonitor/application/resources/css/smoothness/jquery-ui-1.8.23.custom.css" />


<style>
#resize {
width:200px; height:200px; margin:30px 0 0 30px;
border:1px solid #7a7a7a; overflow:hidden;

}
.my-ui-helper { background-color:#FFFF99; }
</style>

<script src="/i-webmonitor/application/resources/js/jquery-1.8.0.min.js"
	type="text/javascript"></script>
<script
	src="/i-webmonitor/application/resources/js/jquery-ui-1.8.23.custom.min.js"
	type="text/javascript"></script>

<script type="text/javascript">
$(document).ready( function(){
	var resizeOpts = {
			
			ghost: true,
			helper: "my-ui-helper",
				animate: true,
				animateDuration: "slow"
			};
	$("#resize").resizable(resizeOpts);
});
</script>
</head>

<body>
<div id="resize">
we also use a custom style sheet to add basic dimensions and borders to our
resizable Use the following CSS in a new file in your text editor:
</div>
</body>
</html>
